<!-- 蓝色登录页面2 -->
<script lang="ts" setup name="login">
import { useRouter } from 'uni-mini-router'
import { setToken } from '@/utils/auth'

definePage({
  name: 'login',
  style: {
    navigationStyle: 'custom',
    // navigationBarTitleText: '首页',
  },
})

const router = useRouter()
const state = reactive({
  phone: '',
  password: '',
})

function login() {
  uni.showToast({ title: '登录', icon: 'none' })
  setToken('66666')
  // router.push({
  //   name: 'home',
  // })
  uni.switchTab({ url: '/pages/index/index' })
}

// 注册按钮点击
function reg() {
  uni.showToast({ title: '注册跳转', icon: 'none' })
}
// 等三方微信登录
function wxLogin() {
  uni.showToast({ title: '微信登录', icon: 'none' })
}
</script>

<template>
  <view style="height: 100vh; background: #fff">
    <view class="img-a">
      <view class="t-b">
        您好，
        <br>
        欢迎使用XXXX
      </view>
    </view>
    <view class="login-view">
      <view class="t-login">
        <form class="cl">
          <view class="t-a">
            <text class="txt">
              手机号
            </text>
            <input
              v-model="state.phone"
              type="number"
              name="phone"
              placeholder="请输入您的手机号"
            >
          </view>
          <view class="t-a">
            <text class="txt">
              密码
            </text>
            <input v-model="state.password" name="code" placeholder="请输入您的密码">
          </view>
          <button @click="login">
            登 录
          </button>
          <view class="reg" @tap="reg()">
            注 册
          </view>
        </form>
        <view class="t-f">
          <text>—————— 第三方账号登录 ——————</text>
        </view>
        <view class="other-login">
          <view class="l-img-warp" @tap="wxLogin()">
            <image class="l-img-wx" src="https://zhoukaiwen.com/img/loginImg/wx.png" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.txt {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.img-a {
  width: 100%;
  height: 450rpx;
  // background-image: url(@/static/images/login-bg-head.png); //微信小程序中无法识别 转base64 或者线上地址
  background-image: url("https://origin.picgo.net/2025/09/17/login-bg-head430592b3bcc6967b.png");
  background-size: 100%;
}

.reg {
  margin-top: 30rpx;
  height: 90rpx;
  font-size: 28rpx;
  text-align: center;
  color: #000;
  background: #f5f6fa;
  border-radius: 50rpx;
  line-height: 90rpx;
  font-weight: bold;
}

.login-view {
  position: relative;
  margin-top: -120rpx;
  width: 100%;
  background-color: #fff;
  border-radius: 8% 8% 0% 0;
}

.t-login {
  padding-top: 80rpx;
  margin: 0 auto;
  width: 600rpx;
  font-size: 28rpx;
}

.t-login button {
  height: 90rpx;
  font-size: 28rpx;
  color: #fff;
  background: #2796f2;
  border-radius: 50rpx;
  line-height: 90rpx;
  font-weight: bold;
}

.t-login input {
  margin-bottom: 50rpx;
  height: 90rpx;
  font-size: 28rpx;
  line-height: 90rpx;
  border-bottom: 1px solid #e9e9e9;
}

.t-login .t-a {
  position: relative;
}

.t-b {
  padding: 130rpx 0 0 70rpx;
  font-size: 42rpx;
  text-align: left;
  color: #fff;
  font-weight: bold;
  line-height: 70rpx;
}

.t-login .t-c {
  position: absolute;
  top: 22rpx;
  right: 22rpx;
  padding: 0 25rpx;
  height: 50rpx;
  font-size: 24rpx;
  color: #fff;
  background: #5677fc;
  border-radius: 50rpx;
  line-height: 50rpx;
}

.t-login .t-d {
  margin: 80rpx 0;
  text-align: center;
  color: #999;
}

.t-login .t-e {
  text-align: center;

  /* width: 250rpx; */
}

.t-login .t-g {
  text-align: center;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  margin: 150rpx 0 0;
  text-align: center;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  font-size: 27rpx;
  color: #aaa;
}

.t-login .uni-input-placeholder {
  color: #aeaeae;
}

.other-login {
  display: flex;
  justify-content: center;
  align-items: center;

  .l-img-warp {
    margin-top: 16px;

    .l-img-wx {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
